也叫做 Visual UI Testing，用來確保在不同裝置、不同作業系統或是不同瀏覽器中，使用者看到的畫面上是相同一致的，例如：顏色、圖像、字體、排版。

MOPCON 2022 有一場 Visual Testing，講者是 Summer。桑莫。夏天的 Summer，除了大會的共筆外，講者也有寫一篇是這場議程的逐字稿，可以和投影片互相搭配看，大推！

很喜歡講者的介紹方式，除了循序漸進的講解外，每一個部分也都寫都很仔細，各種實務上會遇到的疑難雜症也有提供建議！

不貪心，先知道為什麽和使用的工具就好

先看痛點/問題，有一樣的痛才有共鳴，才有興趣往下聽

平常測試要測很久？
因為變因很多、因為每種情境都要測、因為瀏覽器好多種、因為不同解析度的裝置好多種
因為功能很多、要達到一樣的結果/目的，能走的流程動線百百種，每條路都不想放過

要怎麼比對畫面？
使用眼力，但很難做到 pixel 絲毫不差

Visual Testing 測試的種類？
分成兩種，針對元件或是針對頁面

元件怎麼測？
可以使用 Storybook + Chromatic

頁面怎麼測？
可以使用 Cypress + Percy

Percy、Chromatic、Jest-Image-Snapshot 怎麼選？
所指的快照不同，真實看到的畫面或是 DOM 結構，能測試的瀏覽器也不同

萌芽

『 恩，全新關鍵字 Visual Testing、Storybook、Chromatic、Percy、Jest-Image-Snapshot』

參考資源

利用 Cypress 與 Percy 來做 Visual Testing
What is Visual Testing?